<template>
  <div id="pulldownSelectIconfont">
    <vxe-pulldown :ref="'xDown4' + compId" transfer span="24" style="width: 100%">
      <template #default>
        <vxe-input
          class="enterNextInputFlag"
          v-model="keyvalue"
          :disabled="caUse"
          style="width: 100%"
          suffix-icon="vxe-icon-search"
          placeholder="请选择"
          @focus="focusEvent4"
          clearable
        ></vxe-input>
        <!-- @blur="blurEvent4" -->
      </template>
      <template #dropdown>
        <div class="dropdown-selectIcon">
          <el-tabs v-model="activeName">
            <el-tab-pane label="私有图标" name="iconfont">
              <el-row style="margin-bottom: 10px">
                <el-col :span="24">
                  <vxe-input
                    type="text"
                    v-model="searchIconFont"
                    style="width: 100%"
                    suffix-icon="vxe-icon-search"
                  ></vxe-input>
                </el-col>
              </el-row>
              <el-row style="height: 400px; overflow-y: auto">
                <vxe-table
                  :ref="'iconfont' + compId"
                  height="100%"
                  border="inner"
                  :show-header="false"
                  :data="tableList.glyphs"
                  :row-config="{
                    isCurrent: true,
                    isHover: true
                  }"
                  :keyboard-config="{
                    isArrow: true,
                    isTab: true,
                    isEdit: true
                  }"
                  @cell-click="cellClickIconfont"
                  resizable
                  show-overflow
                >
                  <vxe-column field="font_class" title="编码" width="370px">
                    <template #default="{ row }">
                      <i :class="'icon-' + row.font_class"></i>
                      <span>{{ row.font_class }}</span>
                    </template>
                  </vxe-column>
                </vxe-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="系统图标" name="elementui">
              <el-row style="margin-bottom: 10px">
                <el-col :span="24">
                  <vxe-input
                    type="text"
                    v-model="searchIconFontEUI"
                    suffix-icon="vxe-icon-search"
                    style="width: 100%"
                  ></vxe-input>
                </el-col>
              </el-row>
              <el-row style="height: 400px; overflow-y: auto">
                <el-col
                  :span="12"
                  v-for="(item, index) in tabListElementuis.length > 0
                    ? tabListElementuis.filter(
                        (data) => !searchIconFontEUI || data.includes(searchIconFontEUI)
                      )
                    : []"
                  :key="index"
                >
                  <el-button link type="primary" @click="cellClickIconfont({ row: item })">
                    <i :class="item"></i>
                    {{ item }}
                  </el-button>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>
<script setup lang="ts">
import { log } from 'console';
import { ref, reactive, getCurrentInstance, nextTick, onMounted, watch } from 'vue';
import { pageSizes, IsEmpty, newGuid } from '@/utils/common';
import { VxePulldownInstance } from 'vxe-table';
let { proxy, ctx }: any = getCurrentInstance();
let instanceObj = getCurrentInstance() as any;

// 变量
let caUse = ref(false);
let compId = newGuid();
let keyvalue = ref('');
let selectedItem = reactive({}) as any;
let searchIconFont = ref('');
let searchIconFontEUI = ref('');
let activeName = ref('iconfont');
proxy['xDown4' + compId] = ref<VxePulldownInstance>();
//绑定组织模块列表的数据
let tableList = reactive({ glyphs: [] } as any);
let tabListElementuis = reactive([
  'el-icon-platform-eleme',
  'el-icon-eleme',
  'el-icon-delete-solid',
  'el-icon-delete',
  'el-icon-s-tools',
  'el-icon-setting',
  'el-icon-user-solid',
  'el-icon-user',
  'el-icon-phone',
  'el-icon-phone-outline',
  'el-icon-more',
  'el-icon-more-outline',
  'el-icon-star-on',
  'el-icon-star-off',
  'el-icon-s-goods',
  'el-icon-goods',
  'el-icon-warning',
  'el-icon-warning-outline',
  'el-icon-question',
  'el-icon-info',
  'el-icon-remove',
  'el-icon-circle-plus',
  'el-icon-success',
  'el-icon-error',
  'el-icon-zoom-in',
  'el-icon-zoom-out',
  'el-icon-remove-outline',
  'el-icon-circle-plus-outline',
  'el-icon-circle-check',
  'el-icon-circle-close',
  'el-icon-s-help',
  'el-icon-help',
  'el-icon-minus',
  'el-icon-plus',
  'el-icon-check',
  'el-icon-close',
  'el-icon-picture',
  'el-icon-picture-outline',
  'el-icon-picture-outline-round',
  'el-icon-upload',
  'el-icon-upload2',
  'el-icon-download',
  'el-icon-camera-solid',
  'el-icon-camera',
  'el-icon-video-camera-solid',
  'el-icon-video-camera',
  'el-icon-message-solid',
  'el-icon-bell',
  'el-icon-s-cooperation',
  'el-icon-s-order',
  'el-icon-s-platform',
  'el-icon-s-fold',
  'el-icon-s-unfold',
  'el-icon-s-operation',
  'el-icon-s-promotion',
  'el-icon-s-home',
  'el-icon-s-release',
  'el-icon-s-ticket',
  'el-icon-s-management',
  'el-icon-s-open',
  'el-icon-s-shop',
  'el-icon-s-marketing',
  'el-icon-s-flag',
  'el-icon-s-comment',
  'el-icon-s-finance',
  'el-icon-s-claim',
  'el-icon-s-custom',
  'el-icon-s-opportunity',
  'el-icon-s-data',
  'el-icon-s-check',
  'el-icon-s-grid',
  'el-icon-menu',
  'el-icon-share',
  'el-icon-d-caret',
  'el-icon-caret-left',
  'el-icon-caret-right',
  'el-icon-caret-bottom',
  'el-icon-caret-top',
  'el-icon-bottom-left',
  'el-icon-bottom-right',
  'el-icon-back',
  'el-icon-right',
  'el-icon-bottom',
  'el-icon-top',
  'el-icon-top-left',
  'el-icon-top-right',
  'el-icon-arrow-left',
  'el-icon-arrow-right',
  'el-icon-arrow-down',
  'el-icon-arrow-up',
  'el-icon-d-arrow-left',
  'el-icon-d-arrow-right',
  'el-icon-video-pause',
  'el-icon-video-play',
  'el-icon-refresh',
  'el-icon-refresh-right',
  'el-icon-refresh-left',
  'el-icon-finished',
  'el-icon-sort',
  'el-icon-sort-up',
  'el-icon-sort-down',
  'el-icon-rank',
  'el-icon-loading',
  'el-icon-view',
  'el-icon-c-scale-to-original',
  'el-icon-date',
  'el-icon-edit',
  'el-icon-edit-outline',
  'el-icon-folder',
  'el-icon-folder-opened',
  'el-icon-folder-add',
  'el-icon-folder-remove',
  'el-icon-folder-delete',
  'el-icon-folder-checked',
  'el-icon-tickets',
  'el-icon-document-remove',
  'el-icon-document-delete',
  'el-icon-document-copy',
  'el-icon-document-checked',
  'el-icon-document',
  'el-icon-document-add',
  'el-icon-printer',
  'el-icon-paperclip',
  'el-icon-takeaway-box',
  'el-icon-search',
  'el-icon-monitor',
  'el-icon-attract',
  'el-icon-mobile',
  'el-icon-scissors',
  'el-icon-umbrella',
  'el-icon-headset',
  'el-icon-brush',
  'el-icon-mouse',
  'el-icon-coordinate',
  'el-icon-magic-stick',
  'el-icon-reading',
  'el-icon-data-line',
  'el-icon-data-board',
  'el-icon-pie-chart',
  'el-icon-data-analysis',
  'el-icon-collection-tag',
  'el-icon-film',
  'el-icon-suitcase',
  'el-icon-suitcase-1',
  'el-icon-receiving',
  'el-icon-collection',
  'el-icon-files',
  'el-icon-notebook-1',
  'el-icon-notebook-2',
  'el-icon-toilet-paper',
  'el-icon-office-building',
  'el-icon-school',
  'el-icon-table-lamp',
  'el-icon-house',
  'el-icon-no-smoking',
  'el-icon-smoking',
  'el-icon-shopping-cart-full',
  'el-icon-shopping-cart-1',
  'el-icon-shopping-cart-2',
  'el-icon-shopping-bag-1',
  'el-icon-shopping-bag-2',
  'el-icon-sold-out',
  'el-icon-sell',
  'el-icon-present',
  'el-icon-box',
  'el-icon-bank-card',
  'el-icon-money',
  'el-icon-coin',
  'el-icon-wallet',
  'el-icon-discount',
  'el-icon-price-tag',
  'el-icon-news',
  'el-icon-guide',
  'el-icon-male',
  'el-icon-female',
  'el-icon-thumb',
  'el-icon-cpu',
  'el-icon-link',
  'el-icon-connection',
  'el-icon-open',
  'el-icon-turn-off',
  'el-icon-set-up',
  'el-icon-chat-round',
  'el-icon-chat-line-round',
  'el-icon-chat-square',
  'el-icon-chat-dot-round',
  'el-icon-chat-dot-square',
  'el-icon-chat-line-square',
  'el-icon-message',
  'el-icon-postcard',
  'el-icon-position',
  'el-icon-turn-off-microphone',
  'el-icon-microphone',
  'el-icon-close-notification',
  'el-icon-bangzhu',
  'el-icon-time',
  'el-icon-odometer',
  'el-icon-crop',
  'el-icon-aim',
  'el-icon-switch-button',
  'el-icon-full-screen',
  'el-icon-copy-document',
  'el-icon-mic',
  'el-icon-stopwatch',
  'el-icon-medal-1',
  'el-icon-medal',
  'el-icon-trophy',
  'el-icon-trophy-1',
  'el-icon-first-aid-kit',
  'el-icon-discover',
  'el-icon-place',
  'el-icon-location',
  'el-icon-location-outline',
  'el-icon-location-information',
  'el-icon-add-location',
  'el-icon-delete-location',
  'el-icon-map-location',
  'el-icon-alarm-clock',
  'el-icon-timer',
  'el-icon-watch-1',
  'el-icon-watch',
  'el-icon-lock',
  'el-icon-unlock',
  'el-icon-key',
  'el-icon-service',
  'el-icon-mobile-phone',
  'el-icon-bicycle',
  'el-icon-truck',
  'el-icon-ship',
  'el-icon-basketball',
  'el-icon-football',
  'el-icon-soccer',
  'el-icon-baseball',
  'el-icon-wind-power',
  'el-icon-light-rain',
  'el-icon-lightning',
  'el-icon-heavy-rain',
  'el-icon-sunrise',
  'el-icon-sunrise-1',
  'el-icon-sunset',
  'el-icon-sunny',
  'el-icon-cloudy',
  'el-icon-partly-cloudy',
  'el-icon-cloudy-and-sunny',
  'el-icon-moon',
  'el-icon-moon-night',
  'el-icon-dish',
  'el-icon-dish-1',
  'el-icon-food',
  'el-icon-chicken',
  'el-icon-fork-spoon',
  'el-icon-knife-fork',
  'el-icon-burger',
  'el-icon-tableware',
  'el-icon-sugar',
  'el-icon-dessert',
  'el-icon-ice-cream',
  'el-icon-hot-water',
  'el-icon-water-cup',
  'el-icon-coffee-cup',
  'el-icon-cold-drink',
  'el-icon-goblet',
  'el-icon-goblet-full',
  'el-icon-goblet-square',
  'el-icon-goblet-square-full',
  'el-icon-refrigerator',
  'el-icon-grape',
  'el-icon-watermelon',
  'el-icon-cherry',
  'el-icon-apple',
  'el-icon-pear',
  'el-icon-orange',
  'el-icon-coffee',
  'el-icon-ice-tea',
  'el-icon-ice-drink',
  'el-icon-milk-tea',
  'el-icon-potato-strips',
  'el-icon-lollipop',
  'el-icon-ice-cream-square',
  'el-icon-ice-cream-round'
]);

import icons from '@/assets/iconfont/iconfont.json';

onMounted(() => {
  // console.log('compId', compId);
});

// 父组件传值
let props = defineProps({
  url: String, //数据请求地址
  tableColumn: Array as () => String[], //列集合
  displayTexts: Array as () => String[], //显示字段集合
  displayTextObj: String, //显示字段集合
  dataObj: {}, //接口参数。{key1:value1,key2:value2...}
  isDisabled: Boolean //是否可用
});

// 方法
// /获取组织模块列表
function findList() {
  //ToDo
  tableList = icons;
}
//获取焦点
function focusEvent4() {
  findList();
  const $pull = proxy.$refs['xDown4' + compId] as any;

  $pull.showPanel();
}

function cellClickIconfont({ row }) {
  if (activeName.value === 'elementui') {
    keyvalue.value = row;
  }
  if (activeName.value === 'iconfont') {

    keyvalue.value = tableList.css_prefix_text + row.font_class;

  }
  const $pull = proxy.$refs['xDown4' + compId] as any;
  proxy.$nextTick(() => {
    $pull.hidePanel();
    proxy.$emit('ConfirmByClick', keyvalue.value);
  });
}
</script>
<style lang="scss">
#pulldownSelectIconfont {
  overflow-y: auto;
  cursor: pointer;
}
.dropdown-selectIcon {
  padding: 0 10px 10px;
  width: 400px;
  height: 500px;
}
</style>